<!DOCTYPE html>
<html class="uk-height-1-1">
<head>
    <meta charset="utf-8"/>
    <title>登录 - Awesome Python Webapp</title>
    <link rel="stylesheet" href="/static/css/uikit.min.css">
    <link rel="stylesheet" href="/static/css/uikit.gradient.min.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/sha1.min.js"></script>
    <script src="/static/js/uikit.min.js"></script>
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/awesome.js"></script>
    <script>
        $(function () {
            var vmAuth = new Vue({
                el: '#vm',
                data: {
                    email: '',
                    password: ''
                },
                methods: {
                    submit: function (event) {
                        event.preventDefault();
                        var
                            $form = $('#vm'),
                            email = this.email.trim().toLowerCase(),
                            data = {
                                email: email,
                                password: this.password === '' ? '' : CryptoJS.SHA1(email + ':' + this.password).toString()
                            };
                        $form.postJSON('/api/authenticate', data, function (err, result) {
                            if (!err) {
                                location.assign('/');
                            }
                        });
                    }
                }
            });
        });
    </script>
</head>
<body class="uk-height-1-1">
<div class="uk-vertical-align uk-text-center uk-height-1-1">
    <div class="uk-vertical-align-middle" style="width: 320px">
        <p><a href="/" class="uk-icon-button"><i class="uk-icon-html5"></i></a> <a href="/">Awesome Python Webapp</a>
        </p>
        <form id="vm" v-on="submit: submit" class="uk-panel uk-panel-box uk-form">
            <div class="uk-alert uk-alert-danger uk-hidden"></div>
            <div class="uk-form-row">
                <div class="uk-form-icon uk-width-1-1">
                    <i class="uk-icon-envelope-o"></i>
                    <input v-model="email" name="email" type="text" placeholder="电子邮件" maxlength="50"
                           class="uk-width-1-1 uk-form-large">
                </div>
            </div>
            <div class="uk-form-row">
                <div class="uk-form-icon uk-width-1-1">
                    <i class="uk-icon-lock"></i>
                    <input v-model="password" name="password" type="password" placeholder="口令" maxlength="50"
                           class="uk-width-1-1 uk-form-large">
                </div>
            </div>
            <div class="uk-form-row">
                <button type="submit" class="uk-width-1-1 uk-button uk-button-primary uk-button-large"><i
                        class="uk-icon-sign-in"></i> 登录
                </button>
            </div>
        </form>
    </div>
</div>
</body>
</html>